<template>
    <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
// 设置安全秘钥
window._AMapSecurityConfig = {
    securityJsCode: "c7c8569f016540e0481b8b0d8dbc45b1"
};
export default {
    props: ["city_name"],
    data() {
        return {
            //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
            //map:null,
        }
    },
    methods: {
        initMap() {
            let that = this
            AMapLoader.load({
                key: "890f4e50cbe726e38d928077e0639efb",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "3D",    //是否为3D地图模式
                    zoom: 5,           //初始化地图级别
                    center: [105.602725, 37.076636], //初始化地图中心点位置,默认北京
                });
                console.log("1111111111");
                // 通过传递过来的city_name,获取实际经纬度
                let geocoder = new AMap.Geocoder({});
                var marker = new AMap.Marker();
                geocoder.getLocation(that.city_name, function (status, result) {
                    if (status === "complete" && result.geocodes.length) {
                        console.log(result);
                        var lnglat = result.geocodes[0].location;
                        console.log("++++++", lnglat);
                        sessionStorage.setItem("city_name", result.geocodes[0].formattedAddress)
                        sessionStorage.setItem("position", [lnglat.lng, lnglat.lat])
                        //document.getElementById('lnglat').value = lnglat;
                        marker.setPosition(lnglat);
                        that.map.setZoomAndCenter(10, [lnglat.lng, lnglat.lat]);
                        that.map.add(marker);
                        that.map.setFitView(marker);
                    } else {
                        log.error("根据地址查询位置失败");
                    }
                });
                // geocoder.getLocation(that.city_name, (status, result) => {
                //     if (status === "complete" && result.info === "ok") {
                //         // result中存放详细的地理坐标位置
                //         console.log("地理坐标", that.city_name, result);
                //         // 遍历result获取经纬度
                //         result.geocoders.forEach(item => {
                //             console.log(item);
                //             let bus_lat = item.location.lat
                //             let bus_lng = item.location.lng

                //             // 给获取到的经纬度,添加标记点
                //             let marker = new AMap.Marker({
                //                 position: new AMap.LngLat(bus_lng, bus_lat)
                //             })
                //             // 将标记添加到地图上
                //             that.map.setZoomAndCenter(10, [bus_lng, bus_lat])
                //             that.map.add(marker)
                //         })
                //     }
                // })
            }).catch(e => {
                console.log(e);
            })
        },
    },
    mounted() {
        this.initMap()
    },
    destroyed() {
        // 组件销毁,地图销毁,否则报错
        this.map.destroy()
        this.map = null
        this.mapModule = null
    },

}
</script>
<style  scoped>
#container {
    padding: 0px;
    margin: 0px auto;
    width: 90%;
    height: 80%;
}
</style>